import react from 'react'
import './index.css'
export default class LiveButton extends react.Component<LiveButtonProps> {
  state: Readonly<LiveButtonProps>;
  constructor(props: LiveButtonProps) {
    super(props)
    // 参数参考文档
    this.state = {
      name: props.children,
      color: props.color ? props.color : '#409eff',
      circle: props.circle ? props.circle : false,
      width: props.width ? props.width : '',
      height: props.height ? props.height : '',
    }
  }
  render(): react.ReactNode {
    const { name, color, circle, width, height } = this.state
    return (
      <button className='btn' style={
        {
          backgroundColor: color,
          borderRadius: circle ? '100px' : '',
          width,
          height
        }


      }

        onClick={this.click}
      >
        <span
          style={{
            borderRadius: circle ? '100px' : ''
          }}
          className='after'></span>
        {name}
      </button>
    )
  }
  // 按钮点击事件
  click = (e: any) => {
    this.props.onClick(e)
  }
}